<template>
  <div class="page-modal">
    <el-dialog v-model="isPageModal" :title="isAddRef ? '新增用户' : '编辑用户'" width="35%" center>
      <el-form :model="pageModalForm" ref="pageModalFormRef">
        <el-form-item label="用户名" label-width="120px">
          <el-input v-model="pageModalForm.uid" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="角色名" label-width="120px">
          <el-input v-model="pageModalForm.nickname" placeholder="请输入角色名" />
        </el-form-item>
        <el-form-item label="密码" label-width="120px">
          <el-input v-model="pageModalForm.pwd" type="password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="所属分类" label-width="120px">
          <el-select v-model="pageModalForm.region" placeholder="请选择所属分类">
            <el-option label="Zone No.1" value="shanghai" />
            <el-option label="Zone No.2" value="beijing" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handelReset">重置</el-button>
          <el-button type="primary" @click="handelSubmit"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import useBaseStore from '@/store/main';
import type { FormInstance } from 'element-plus';
import { storeToRefs } from 'pinia';
import { ref } from 'vue';

const pageModalForm = ref<any>({
  name: '',
  region: ''
});
const isPageModal = ref(false);
const isAddRef = ref(false);

const pageModalFormRef = ref<FormInstance>();

// 重置事件
const handelReset = () => {
  pageModalFormRef.value?.resetFields();
};

const baseStore = useBaseStore();
const { sysuserTabs } = storeToRefs(baseStore);

// 提交事件
const handelSubmit = () => {
  if (isAddRef) {
    // 添加
    console.log(sysuserTabs?.value);
    sysuserTabs.value.push(pageModalForm.value);
  } else {
    // 编辑
  }
};

const handleChange = (isAdd: boolean, modalInfo?: any) => {
  pageModalForm.value = {};
  if (isAdd) {
    // 添加
  } else {
    // 编辑
    pageModalForm.value = modalInfo;
    console.log(modalInfo);
  }

  isAddRef.value = isAdd;
  isPageModal.value = true;
};

defineExpose({
  handleChange
});
</script>

<style scoped>
.page-modal {
}
</style>
